import { Button, message } from 'antd'
import React, { useEffect, useLayoutEffect, useRef, useState } from 'react'


function CCom() {
    useEffect(() => {
        console.log("c---->effect");
        return () => {
            console.log("C--->return");

        }
    }, [])
    useLayoutEffect(() => {
        console.log("c---->out");
        return () => {
            console.log("CLayout--->return");

        }
    }, [])
    return (<div>c组件</div>)
}
function BCom() {
    useEffect(() => {
        console.log("b---->effect");
        return () => {
            console.log("B--->return");

        }
    }, [])
    useLayoutEffect(() => {
        console.log("b---->out");
        return () => {
            console.log("Blayout--->return");

        }
    }, [])
    return (<div>b<CCom /></div>)
}
function ACom() {
    useEffect(() => {
        console.log("a---->effect");
        return () => {
            console.log("A--->return");

        }
    }, [])
    useLayoutEffect(() => {
        console.log("a---->out");

        return () => {
            console.log("Alayout--->return");

        }
    }, [])
    return (<div>a组件 <BCom /></div>)
}


export default function index() {

    return (
            <ACom />
    )
}
